import React,{Component} from 'react';
import {Link,browserHistory} from 'react-router';
import Pages from '../Pages';
import {  Spin,message} from 'antd';
import * as pub from '../../config/public'
import * as fetch from '../../config/fetch'
import Layer from '../Layer';

class ArticleList extends Component {
	constructor(props) {
		super(props);
		this.state={
			 essayList:[],
			 visibleDH:false,
			 nowPoint:"",
			 userdetail:"",
			 user:"",
		}
	}
    componentWillReceiveProps(nextProps) {
    	this.setState({
			essayList:nextProps.essayList,
    	})
    }

	shouldComponentUpdate(nextProps, nextState) {
        return pub.shouldComponentUpdate(nextProps, nextState, this.props, this.state);
    }

	operate(id, type) {//蜂行圈收藏1点赞0
		/*console.log(id,type)*/
		fetch.operateArticle(id, type).then((data) => {
			if (data.result === 'RC100') {
				this.props.show();
				message.success(data.msg, 3);
			}if(data.result === 'RC200'){
				message.error(data.errMsg, 3);
			}
		})
	}

	confirmBuy(item,type,id){
			if(item.userEssayOperation.isBuy===1){
				if(id!==undefined){
					this.operate(item.essayId,type)
				}else{
					pub.jumpHistory.push("/ArticleDetail/" + item.essayId);
				}
			}else{
			   this.setState({
				visibleDH:true,
				nowPoint:item.exchangeIntegral,
				userdetail:item.essayId,
				user:item.userCode
			   })
			}
		}
		
	ok(id,code){
		fetch.articletext(id,code).then((data)=>{
			if(data.result === 'RC100'){
				message.success(data.errMsg, 3)
				pub.jumpHistory.push("/ArticleDetail/" +id)
			}else{
				message.error(data.errMsg, 3);
			}
		}, (res) => {
			pub.reject(res);
		})
	}

	render(){
		return(
		
			<div style={{minHeight:'611px'}}>
                {this.state.essayList.map((item,index)=>{
                    return(
						<div key={index} className="panel-120 bg-FFFFFF bon'p'mx-shadow" style={{height:'231px'}}>
							<div className="author-msg" style={{ height: '50px' }}>
								
								<img src={pub.getFile(item.headPath)} alt="head" style={{borderRadius:"50%"}} onError={(e) => pub.headImageError(e)}/>
								<p><span>{item.userRealName}</span><span>{item.branchOffice}</span></p>
								<p className="time">{pub.formatTimestamp(item.createTime)}</p>
								
								{item.goodEssay === "1" ? <div className="jing"></div> : null}
							</div>
							{item.goodEssay === "1" ?
								<Link onClick={() => this.confirmBuy(item,"1")} className="article-list" style={{ display: 'block' }}>
									<p className="title" style={{ width: '500px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{item.essayTitle}</p>
									<p className="content shorthand">{item.essayNote ? pub.subString(item.essayNote,100) : '没有文字'}</p>
									{
										item.essayPhotos.length > 0 ?
											<img src={pub.getFile(item.essayPhotos[0].essayPhotoPath)} alt="head" />
										:
										null
									}
								</Link>
								: <Link to={"/ArticleDetail/" + item.essayId} className="article-list" style={{ display: 'block' }}>
									<p className="title" style={{ width: '500px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{item.essayTitle}</p>
									<p className="content shorthand">{item.essayNote ? pub.subString(item.essayNote,100) : '没有文字'}</p>
									{
										item.essayPhotos.length > 0 ?
											<img src={pub.getFile(item.essayPhotos[0].essayPhotoPath)} alt="head" />
										:
										null
									}
									
									
								</Link>}
							
							
							<div className="collect-like">

								{item.goodEssay === "1" ?
									<span onClick={() => this.confirmBuy(item, '1',item.essayId,)} style={{ opacity: item.userEssayOperation.isCollection === 1 ? 1 : 0.4 }}><i className="icon-heart"></i><span className="cooLike-font">{item.sumCollection}</span></span>
									:
									<span onClick={() => this.operate(item.essayId, '1')} style={{ opacity: item.userEssayOperation.isCollection === 1 ? 1 : 0.4 }}><i className="icon-heart"></i><span className="cooLike-font">{item.sumCollection}</span></span>
								}

								<span onClick={() => this.operate(item.essayId, '0')} style={{ opacity: item.userEssayOperation.isLike === 1 ? 1 : 0.4 }}><i className="icon-thumbs-up"></i><span className="cooLike-font">{item.sumLike}</span></span>
							</div>

						</div>
                    )
                })}


				<Layer
								title="兑换积分"
								show={this.state.visibleDH}
								hide={(e) => { this.setState({ visibleDH: false }) }}
								width="400px"
								height="270px"
							>
								<div className="row">
									<div className="pop-box-1" style={{ textAlign: 'left' }}>
										<p style={{ textAlign: 'center' }}>您需要{this.state.nowPoint}积分兑换</p>
									</div>
									<div className="pop-btn">
										<a onClick={() => { this.setState({ visibleDH: false }) }} className="btn btn-blue" style={{ borderRadius: '5px', marginRight: '50px' }}>取消</a>
										<a className="btn btn-blue" style={{ borderRadius: '5px' }} onClick={() => this.ok(this.state.userdetail, this.state.user)}>确认
								</a>
									</div>
								</div>
							</Layer>
			</div>
			)
	}
}
class GoodArticle extends Component {
	constructor(args) {
		super();
		this.state = {
			jumpPage: 1,
			essayList: [],
			totalPage: 1,
			loading: false
		}
	}
	componentWillMount() {
		this.show();
	}
	jump(page) {
		pub.loading(this, true);
		this.setState({jumpPage:page},()=>{
			this.show()
		})
	}
	show() {
		pub.loading(this, true);
		fetch.getEssaylist({pageno:this.state.jumpPage}).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					essayList: data.essayList,
					totalPage: data.total
				}, () => {
					pub.loading(this, false);
				})
			} else {
				message.error(data.errMsg, 3);
				pub.loading(this, false);
			}
		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
		})
	}
	render(){
		return(
			 <div className="wrapper bg-F0F4F6">
			   <div className="layout clearFix" style={{paddingTop:'0px',paddingBottom:'60px'}}>
			      <div className="layout" style={{paddingTop:'20px',width: '1280px'}}>
					  <Spin spinning={this.state.loading} tip="加载列表中...">
			             <ArticleList show={this.show.bind(this)}   essayList={this.state.essayList}/>
					  </Spin>
			             <div className="line"></div>
			             <Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)}/>
			         </div>
			    </div>
			</div>
			)
	}
}
export default GoodArticle;